<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用的UI特性和基础元素</title>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../assets/css/font-awesome.min.css" />

    <!-- page specific plugin styles -->
    <!-- Imageless Spinner-->
    <link rel="stylesheet" href="../assets/css/jquery-ui.custom.min.css" />
    <!--通知-->
    <link rel="stylesheet" href="../assets/css/jquery.gritter.css" />
    <!--弹出对话框-->
    <link rel="stylesheet" href="../assets/css/jquery-ui.min.css" />
    <!-- text fonts -->
    <link rel="stylesheet" href="../assets/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="../assets/css/ace.min.css" id="main-ace-style" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../assets/css/ace-part2.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
    <![endif]-->

    <!-- ace 设置处理程序 -->
    <script src="../assets/js/ace-extra.min.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8]>
    <script src="../assets/js/html5shiv.min.js"></script>
    <script src="../assets/js/respond.min.js"></script>
    <![endif]-->
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>"+"<"+"/script>");
    </script>
    <!-- <![endif]-->
    <!--[if IE]>
    <script type="text/javascript">
        window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
    </script>
    <![endif]-->

    <script src="../assets/js/bootstrap.min.js"></script>
    <!-- ace scripts -->
    <script src="../assets/js/ace-elements.min.js"></script>
    <script src="../assets/js/ace.min.js"></script>

    <!--图形-进度条-->
    <script src="../assets/js/jquery.easypiechart.min.js"></script>
    <!--弹出层-->
    <script src="../assets/js/bootbox.min.js"></script>
    <!--弹出对话框-->
    <script src="../assets/js/jquery-ui.min.js"></script>
    <!-- Imageless Spinner-->
    <script src="../assets/js/jquery-ui.custom.min.js"></script>
    <script type="text/javascript">
        jQuery(function($) {
//            $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//                if($(e.target).attr('href') == "#home") drawChartNow();
//            })

//            手风琴样式
            $('#accordion-style').on('click', function(ev){
                var target = $('input', ev.target);
                var which = parseInt(target.val());
                if(which == 2) $('#accordion').addClass('accordion-style2');
                else $('#accordion').removeClass('accordion-style2');
            });

//            图形-进度条
            var oldie = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
            $('.easy-pie-chart.percentage').each(function(){
                $(this).easyPieChart({
                    barColor: $(this).data('color'),
                    trackColor: '#EEEEEE',
                    scaleColor: false,
                    lineCap: 'butt',
                    lineWidth: 8,
                    animate: oldie ? false : 1000,
                    size:75
                }).css('color', $(this).data('color'));
            });

//            提示工具
            $('[data-rel=tooltip]').tooltip();
            $('[data-rel=popover]').popover({html:true});

//            通知
            var $path_assets = "../assets";//this will be used in gritter alerts containing images
            $('#gritter-regular').on(ace.click_event, function(){
                $.gritter.add({
                    title: 'This is a regular notice!',
                    text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="blue">magnis dis parturient</a> montes, nascetur ridiculus mus.',
                    image: $path_assets+'/avatars/avatar1.png',
                    sticky: false,
                    time: '',
                    class_name: (!$('#gritter-light').get(0).checked ? 'gritter-light' : '')
                });

                return false;
            });
            $('#gritter-sticky').on(ace.click_event, function(){
                var unique_id = $.gritter.add({
                    title: 'This is a sticky notice!',
                    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="red">magnis dis parturient</a> montes, nascetur ridiculus mus.',
                    image: $path_assets+'/avatars/avatar.png',
                    sticky: true,
                    time: '',
                    class_name: 'gritter-info' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
                });

                return false;
            });
            $('#gritter-without-image').on(ace.click_event, function(){
                $.gritter.add({
                    // (string | mandatory) the heading of the notification
                    title: 'This is a notice without an image!',
                    // (string | mandatory) the text inside the notification
                    text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="orange">magnis dis parturient</a> montes, nascetur ridiculus mus.',
                    class_name: 'gritter-success' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
                });

                return false;
            });
            $('#gritter-max3').on(ace.click_event, function(){
                $.gritter.add({
                    title: 'This is a notice with a max of 3 on screen at one time!',
                    text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" class="green">magnis dis parturient</a> montes, nascetur ridiculus mus.',
                    image: $path_assets+'/avatars/avatar3.png',
                    sticky: false,
                    before_open: function(){
                        if($('.gritter-item-wrapper').length >= 3)
                        {
                            return false;
                        }
                    },
                    class_name: 'gritter-warning' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
                });

                return false;
            });
            $('#gritter-center').on(ace.click_event, function(){
                $.gritter.add({
                    title: 'This is a centered notification',
                    text: 'Just add a "gritter-center" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
                    class_name: 'gritter-info gritter-center' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
                });

                return false;
            });
            $('#gritter-error').on(ace.click_event, function(){
                $.gritter.add({
                    title: 'This is a warning notification',
                    text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
                    class_name: 'gritter-error' + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
                });

                return false;
            });
            $("#gritter-remove").on(ace.click_event, function(){
                $.gritter.removeAll();
                return false;
            });
            ///////

//            弹出框
            $("#bootbox-regular").on(ace.click_event, function() {
                bootbox.prompt("What is your name?", function(result) {
                    if (result === null) {

                    } else {

                    }
                });
            });

            $("#bootbox-confirm").on(ace.click_event, function() {
                bootbox.confirm("Are you sure?", function(result) {
                    if(result) {
                        //
                    }
                });
            });
            $("#bootbox-options").on(ace.click_event, function() {
                bootbox.dialog({
                    message: "<span class='bigger-110'>I am a custom dialog with smaller buttons</span>",
                    buttons:
                    {
                        "success" :
                        {
                            "label" : "<i class='ace-icon fa fa-check'></i> Success!",
                            "className" : "btn-sm btn-success",
                            "callback": function() {
                                //Example.show("great success");
                            }
                        },
                        "danger" :
                        {
                            "label" : "Danger!",
                            "className" : "btn-sm btn-danger",
                            "callback": function() {
                                //Example.show("uh oh, look out!");
                            }
                        },
                        "click" :
                        {
                            "label" : "Click ME!",
                            "className" : "btn-sm btn-primary",
                            "callback": function() {
                                //Example.show("Primary button");
                            }
                        },
                        "button" :
                        {
                            "label" : "Just a button...",
                            "className" : "btn-sm"
                        }
                    }
                });
            });

            <!-- Imageless Spinner-->
            $('#spinner-opts small').css({display:'inline-block', width:'60px'})

            var slide_styles = ['', 'green','red','purple','orange', 'dark'];
            var ii = 0;
            $("#spinner-opts input[type=text]").each(function() {
                var $this = $(this);
                $this.hide().after('<span />');
                $this.next().addClass('ui-slider-small').
                addClass("inline ui-slider-"+slide_styles[ii++ % slide_styles.length]).
                css({'width':'125px'}).slider({
                    value:parseInt($this.val()),
                    range: "min",
                    animate:true,
                    min: parseInt($this.data('min')),
                    max: parseInt($this.data('max')),
                    step: parseFloat($this.data('step')),
                    slide: function( event, ui ) {
                        $this.val(ui.value);
                        spinner_update();
                    }
                });
            });

            $.fn.spin = function(opts) {
                this.each(function() {
                    var $this = $(this),
                            data = $this.data();

                    if (data.spinner) {
                        data.spinner.stop();
                        delete data.spinner;
                    }
                    if (opts !== false) {
                        data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
                    }
                });
                return this;
            };

            function spinner_update() {
                var opts = {};
                $('#spinner-opts input[type=text]').each(function() {
                    opts[this.name] = parseFloat(this.value);
                });
                $('#spinner-preview').spin(opts);
            }

//            pills
            $('#id-pills-stacked').removeAttr('checked').on('click', function(){
                $('.nav-pills').toggleClass('nav-stacked');
            });

//            对话框
            //override dialog's title function to allow for HTML titles
            $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
                _title: function(title) {
                    var $title = this.options.title || '&nbsp;';
                    if( ("title_html" in this.options) && this.options.title_html == true )
                        title.html($title);
                    else title.text($title);
                }
            }));

            $( "#id-btn-dialog1" ).on('click', function(e) {
                e.preventDefault();

                var dialog = $( "#dialog-message" ).removeClass('hide').dialog({
                    modal: true,
                    title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> jQuery UI Dialog</h4></div>",
                    title_html: true,
                    buttons: [
                        {
                            text: "Cancel",
                            "class" : "btn btn-xs",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        },
                        {
                            text: "OK",
                            "class" : "btn btn-primary btn-xs",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });
            });
            $( "#id-btn-dialog2" ).on('click', function(e) {
                e.preventDefault();

                $( "#dialog-confirm" ).removeClass('hide').dialog({
                    resizable: false,
                    modal: true,
                    title: "<div class='widget-header'><h4 class='smaller'><i class='ace-icon fa fa-exclamation-triangle red'></i> Empty the recycle bin?</h4></div>",
                    title_html: true,
                    buttons: [
                        {
                            html: "<i class='ace-icon fa fa-trash-o bigger-110'></i>&nbsp; Delete all items",
                            "class" : "btn btn-danger btn-xs",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                        ,
                        {
                            html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; Cancel",
                            "class" : "btn btn-xs",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });
            });

            //spinner
            var spinner = $( "#spinner" ).spinner({
                create: function( event, ui ) {
                    //add custom classes and icons
                    $(this)
                            .next().addClass('btn btn-success').html('<i class="ace-icon fa fa-plus"></i>')
                            .next().addClass('btn btn-danger').html('<i class="ace-icon fa fa-minus"></i>')

                    //larger buttons on touch devices
                    if('touchstart' in document.documentElement)
                        $(this).closest('.ui-spinner').addClass('ui-spinner-touch');
                }
            });
        })
    </script>
    <!--通知-->
    <script src="../assets/js/jquery.gritter.min.js"></script>
    <style>
        /* some elements used in demo only */
        .spinner-preview {
            width: 100px;
            height: 100px;
            text-align: center;
            margin-top: 60px;
        }

        .dropdown-preview {
            margin: 0 5px;
            display: inline-block;
        }
        .dropdown-preview  > .dropdown-menu {
            display: block;
            position: static;
            margin-bottom: 5px;
        }
    </style>
</head>
<body class="no-skin" style="background: #fff">
    <div class="row" style="background: #fff;margin: 20px">
        <div class="col-xs-12">
            <!--Tab选项卡-S-->
            <div class="row">
                <div class="col-sm-6">
                    <div class="tabbable">
                        <ul class="nav nav-tabs" id="myTab">
                            <li class="active">
                                <a data-toggle="tab" href="#home">
                                    <i class="green ace-icon fa fa-home bigger-120"></i>
                                    Home
                                </a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#messages">
                                    Messages
                                    <span class="badge badge-danger">4</span>
                                </a>
                            </li>

                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                    Dropdown &nbsp;
                                    <i class="ace-icon fa fa-caret-down bigger-110 width-auto"></i>
                                </a>

                                <ul class="dropdown-menu dropdown-info">
                                    <li>
                                        <a data-toggle="tab" href="#dropdown1">@fat</a>
                                    </li>

                                    <li>
                                        <a data-toggle="tab" href="#dropdown2">@mdo</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div id="home" class="tab-pane fade in active">
                                <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                            </div>

                            <div id="messages" class="tab-pane fade">
                                <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                            </div>

                            <div id="dropdown1" class="tab-pane fade">
                                <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                            </div>

                            <div id="dropdown2" class="tab-pane fade">
                                <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.</p>
                            </div>
                        </div>
                    </div>

                </div><!-- /.col -->

                <div class="vspace-6-sm"></div>

                <div class="col-sm-6">
                    <div class="tabbable tabs-below">
                        <div class="tab-content">
                            <div id="home2" class="tab-pane in active">
                                <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                            </div>

                            <div id="profile2" class="tab-pane">
                                <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                            </div>

                            <div id="dropdown12" class="tab-pane">
                                <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                            </div>
                        </div>

                        <ul class="nav nav-tabs" id="myTab2">
                            <li class="active">
                                <a data-toggle="tab" href="#home2">Home</a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#profile2">Profile</a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#dropdown12">More</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div><!-- /.row -->
            <div class="space"></div>
            <div class="row">
                <div class="col-sm-6">
                    <!-- #section:elements.tab.position -->
                    <div class="tabbable tabs-left">
                        <ul class="nav nav-tabs" id="myTab3">
                            <li class="active">
                                <a data-toggle="tab" href="#home3">
                                    <i class="pink ace-icon fa fa-tachometer bigger-110"></i>
                                    Home
                                </a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#profile3">
                                    <i class="blue ace-icon fa fa-user bigger-110"></i>
                                    Profile
                                </a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#dropdown13">
                                    <i class="ace-icon fa fa-rocket"></i>
                                    More
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div id="home3" class="tab-pane in active">
                                <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                            </div>

                            <div id="profile3" class="tab-pane">
                                <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                                <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                            </div>

                            <div id="dropdown13" class="tab-pane">
                                <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                                <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                            </div>
                        </div>
                    </div>

                    <!-- /section:elements.tab.position -->
                </div><!-- /.col -->

                <div class="vspace-6-sm"></div>

                <div class="col-sm-6">
                    <!-- #section:elements.tab.option -->
                    <div class="tabbable">
                        <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
                            <li class="active">
                                <a data-toggle="tab" href="#home4">Home</a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#profile4">Profile</a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#dropdown14">More</a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div id="home4" class="tab-pane in active">
                                <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                            </div>

                            <div id="profile4" class="tab-pane">
                                <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                            </div>

                            <div id="dropdown14" class="tab-pane">
                                <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                            </div>
                        </div>
                    </div>

                    <!-- /section:elements.tab.option -->
                </div><!-- /.col -->
            </div><!-- /.row -->
            <!--Tab选项卡-E-->
            <div class="hr hr-double hr-dotted hr18"></div>
            <!--手风琴与进度条-S-->
            <div class="row">
                <!--手风琴-S-->
                <div class="col-sm-6">
                    <h3 class="row header smaller lighter blue">
                        <span class="col-xs-6"> 手风琴 </span><!-- /.col -->

											<span class="col-xs-6">
												<span class="pull-right inline">
													<span class="grey smaller-80 bolder">style:</span>

													<span class="btn-toolbar inline middle no-margin">
														<span id="accordion-style" data-toggle="buttons" class="btn-group no-margin">
															<label class="btn btn-xs btn-yellow active">
                                                                <input type="radio" value="1" />
                                                                1
                                                            </label>

															<label class="btn btn-xs btn-yellow">
                                                                <input type="radio" value="2" />
                                                                2
                                                            </label>
														</span>
													</span>
												</span>
											</span><!-- /.col -->
                    </h3>

                    <!-- #section:elements.accordion -->
                    <div id="accordion" class="accordion-style1 panel-group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                        <i class="ace-icon fa fa-angle-down bigger-110" data-icon-hide="ace-icon fa fa-angle-down" data-icon-show="ace-icon fa fa-angle-right"></i>
                                        &nbsp;Group Item #1
                                    </a>
                                </h4>
                            </div>

                            <div class="panel-collapse collapse in" id="collapseOne">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                        <i class="ace-icon fa fa-angle-right bigger-110" data-icon-hide="ace-icon fa fa-angle-down" data-icon-show="ace-icon fa fa-angle-right"></i>
                                        &nbsp;Group Item #2
                                    </a>
                                </h4>
                            </div>

                            <div class="panel-collapse collapse" id="collapseTwo">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                        <i class="ace-icon fa fa-angle-right bigger-110" data-icon-hide="ace-icon fa fa-angle-down" data-icon-show="ace-icon fa fa-angle-right"></i>
                                        &nbsp;Group Item #3
                                    </a>
                                </h4>
                            </div>

                            <div class="panel-collapse collapse" id="collapseThree">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- /section:elements.accordion -->
                </div><!-- /.col -->
                <!--手风琴-E-->
                <!--进度条-S-->
                <div class="col-sm-6">
                    <h3 class="header smaller lighter green">进度条</h3>

                    <div class="row">
                        <div class="col-xs-8">
                            <!-- #section:elements.progressbar -->
                            <div class="progress pos-rel" data-percent="66%">
                                <div class="progress-bar" style="width:66%;"></div>
                            </div>

                            <div class="progress progress-striped pos-rel" data-percent="25%">
                                <div class="progress-bar progress-bar-success" style="width: 25%;"></div>
                            </div>

                            <!-- /section:elements.progressbar -->
                            <div class="progress progress-small progress-striped active">
                                <div class="progress-bar progress-bar-warning" style="width: 40%;"></div>
                            </div>

                            <div class="progress progress-mini">
                                <div class="progress-bar progress-danger" style="width: 35%;"></div>
                            </div>

                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 35%;"></div>

                                <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>

                                <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
                            </div>

                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-purple" style="width: 65%"></div>
                            </div>

                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-pink" style="width: 40%"></div>
                            </div>

                            <div class="progress progress-striped active">
                                <div class="progress-bar progress-bar-yellow" style="width: 60%"></div>
                            </div>

                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-inverse" style="width: 80%"></div>
                            </div>
                        </div><!-- /.col -->

                        <div class="col-xs-4 center">
                            <!-- #section:plugins/charts.easypiechart -->
                            <div class="easy-pie-chart percentage" data-percent="20" data-color="#D15B47">
                                <span class="percent">20</span>%
                            </div>

                            <hr />
                            <div class="easy-pie-chart percentage" data-percent="55" data-color="#87CEEB">
                                <span class="percent">55</span>%
                            </div>

                            <hr />
                            <div class="easy-pie-chart percentage" data-percent="90" data-color="#87B87F">
                                <span class="percent">90</span>%
                            </div>

                            <!-- /section:plugins/charts.easypiechart -->
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </div><!-- /.col -->
                <!--进度条-E-->
            </div>
            <!--手风琴与进度条-E-->
            <hr />
            <!--提示工具-S-->
            <div class="row">
                <div class="col-sm-6">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h4 class="smaller">
                                提示工具
                                <small>不同的方向和颜色</small>
                            </h4>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main">
                                <p class="muted">
                                    Tight pants next level keffiyeh
                                    <a title="Default tooltip" data-rel="tooltip" href="#">you probably</a>
                                    haven't heard of them. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
                                    <a title="Another tooltip" data-rel="tooltip" href="#">have a</a>
                                    terry richardson vinyl chambray. A really ironic artisan
                                    <a data-rel="tooltip" href="#" data-original-title="Another one here too">whatever</a>
                                    keytar, scenester farm-to-table banksy Austin
                                    <a title="The last tip!" data-rel="tooltip" href="#">twitter</a>
                                    handle.
                                </p>

                                <hr />

                                <!-- #section:elements.tooltip -->
                                <p>
                                    <span class="btn btn-sm" data-rel="tooltip" title="Default">Default</span>
                                    <span class="btn btn-warning btn-sm tooltip-warning" data-rel="tooltip" data-placement="left" title="Left Warning">Left</span>
                                    <span class="btn btn-success btn-sm tooltip-success" data-rel="tooltip" data-placement="right" title="Right Success">Right</span>
                                    <span class="btn btn-danger btn-sm tooltip-error" data-rel="tooltip" data-placement="top" title="Top Danger">Top</span>
                                    <span class="btn btn-info btn-sm tooltip-info" data-rel="tooltip" data-placement="bottom" title="Bottm Info">Bottom</span>
                                </p>

                                <!-- /section:elements.tooltip -->
                            </div>
                        </div>
                    </div>
                </div><!-- /.col -->

                <div class="col-sm-6">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h4 class="smaller">Popovers</h4>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main">
                                <!-- #section:elements.popover -->
                                <p>
                                    <span class="btn btn-sm" data-rel="popover" title="Default" data-content="Heads up! This alert needs your attention, but it's not super important.">Default</span>
                                    <span class="btn btn-success btn-sm popover-success" data-rel="popover" data-placement="right" title="<i class='ace-icon fa fa-check green'></i> Right Success" data-content="Well done! You successfully read this important alert message.">Right</span>
                                    <span class="btn btn-warning btn-sm popover-warning" data-rel="popover" data-placement="left" title="<i class='ace-icon fa fa-exclamation-triangle orange'></i> Left Warning" data-content="Warning! Best check yo self, you're not looking too good.">Left</span>
                                </p>

                                <p>
                                    <span class="btn btn-danger btn-sm popover-error" data-rel="popover" data-placement="top" data-original-title="<i class='ace-icon fa fa-bolt red'></i> Top Danger" data-content="Oh snap! Change a few things up and try submitting again.">Top</span>
                                    <span class="btn btn-info btn-sm popover-info" data-rel="popover" data-placement="bottom" title="Some Info" data-content="Heads up! This alert needs your attention, but it's not super important.">Bottom</span>
                                    <span class="btn btn-inverse btn-sm popover-notitle" data-rel="popover" data-placement="bottom" data-content="Popover without a title!">No Title</span>
                                </p>

                                <!-- /section:elements.popover -->
                            </div>
                        </div>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
            <!--提示工具-E-->
            <!--警告框和通知-S-->
            <div class="row">
                <!--警告框-S-->
                <div class="col-sm-6">
                    <h3 class="header smaller lighter green">
                        <i class="ace-icon fa fa-bullhorn"></i>
                        警告框
                    </h3>

                    <div class="alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert">
                            <i class="ace-icon fa fa-times"></i>
                        </button>

                        <strong>
                            <i class="ace-icon fa fa-times"></i>
                            Oh snap!
                        </strong>

                        Change a few things up and try submitting again.
                        <br />
                    </div>

                    <div class="alert alert-warning">
                        <button type="button" class="close" data-dismiss="alert">
                            <i class="ace-icon fa fa-times"></i>
                        </button>
                        <strong>Warning!</strong>

                        Best check yo self, you're not looking too good.
                        <br />
                    </div>

                    <div class="alert alert-block alert-success">
                        <button type="button" class="close" data-dismiss="alert">
                            <i class="ace-icon fa fa-times"></i>
                        </button>

                        <p>
                            <strong>
                                <i class="ace-icon fa fa-check"></i>
                                Well done!
                            </strong>
                            You successfully read this important alert message.
                        </p>

                        <p>
                            <button class="btn btn-sm btn-success">Do This</button>
                            <button class="btn btn-sm">Or This One</button>
                        </p>
                    </div>

                    <div class="alert alert-info">
                        <button type="button" class="close" data-dismiss="alert">
                            <i class="ace-icon fa fa-times"></i>
                        </button>
                        <strong>Heads up!</strong>

                        This alert needs your attention, but it's not super important.
                        <br />
                    </div>
                </div><!-- /.col -->
                <!--警告框-E-->
                <!--通知-S-->
                <div class="col-sm-6">
                    <h3 class="row header smaller lighter orange">
											<span class="col-sm-8">
												<i class="ace-icon fa fa-bell"></i>
												Gritter Notifications
											</span><!-- /.col -->

											<span class="col-sm-4">
												<label class="pull-right inline">
                                                    <small class="muted">Dark:</small>

                                                    <input id="gritter-light" checked="" type="checkbox" class="ace ace-switch ace-switch-5" />
                                                    <span class="lbl middle"></span>
                                                </label>
											</span><!-- /.col -->
                    </h3>

                    <p>
                        <i>Click to see</i>
                    </p>

                    <!-- #section:plugins/misc.gritter -->
                    <p>
                        <button class="btn" id="gritter-regular">Regular</button>
                        <button class="btn btn-info" id="gritter-sticky">Sticky</button>
                        <button class="btn btn-success" id="gritter-without-image">Without Image</button>
                    </p>

                    <p>
                        <button class="btn btn-danger" id="gritter-error">Error</button>
                        <button class="btn btn-warning" id="gritter-max3">Max 3</button>
                        <button class="btn btn-primary" id="gritter-center">Center</button>
                        <button class="btn btn-inverse" id="gritter-remove">Remove</button>
                    </p>

                    <!-- /section:plugins/misc.gritter -->
                </div><!-- /.col -->
                <!--通知-E-->
            </div><!-- /.row -->
            <!--警告框和通知-E-->
            <!--弹出层与基础框-S-->
            <div class="row">
                <!--弹出层_S-->
                <div class="col-sm-6">
                    <div>
                        <h3 class="header smaller lighter purple">
                            Bootstrap Modals
                            <small>(Bootbox.js)</small>
                        </h3>

                        <!-- #section:plugins/misc.bootbox -->
                        <p>
                            <button class="btn" id="bootbox-regular">Regular Dialog</button>
                            <button class="btn btn-info" id="bootbox-confirm">Confirm</button>
                            <button class="btn btn-success" id="bootbox-options">More Options</button>
                        </p>

                        <!-- /section:plugins/misc.bootbox -->
                    </div><!-- /.row -->

                    <div class="space-24"></div>

                    <div class="row">
                        <div class="col-xs-12">
                            <h3 class="header smaller lighter grey">
                                <i class="ace-icon fa fa-spinner fa-spin orange bigger-125"></i>
                                Imageless Spinner
                                <small>(spin.js)</small>
                            </h3>
                        </div>

                        <div class="col-xs-12">
                            <i>更改一个开始值</i>

                            <div class="pull-right center spinner-preview" id="spinner-preview"></div>

                            <form class="form-horizontal" id="spinner-opts">
                                <!-- #section:plugins/jquery.slider -->
                                <label class="inline">
                                    <small class="lighter">Lines:</small>

                                    <input class="hidden" type="text" name="lines" data-min="5" data-max="16" data-step="2" value="12" />
                                </label>

                                <div class="space-0"></div>

                                <label class="inline">
                                    <small class="lighter">Length:</small>

                                    <input class="hidden" type="text" name="length" data-min="0" data-max="30" value="7" />
                                </label>

                                <div class="space-0"></div>

                                <label class="inline">
                                    <small class="lighter">Width:</small>

                                    <input class="hidden" type="text" name="width" data-min="2" data-max="20" value="4" />
                                </label>

                                <div class="space-0"></div>

                                <label class="inline">
                                    <small class="lighter">Radius:</small>

                                    <input class="hidden" type="text" name="radius" data-min="0" data-max="40" value="10" />
                                </label>

                                <div class="space-0"></div>

                                <label class="inline">
                                    <small class="lighter">Corners:</small>

                                    <input class="hidden" type="text" name="corners" data-min="0" data-max="1" data-step="0.1" value="1" />
                                </label>

                                <div class="space-0"></div>

                                <label class="inline">
                                    <small class="lighter">Rotate:</small>

                                    <input class="hidden" type="text" name="rotate" data-min="0" data-max="90" value="0" />
                                </label>

                                <div class="space-0"></div>

                                <label class="inline">
                                    <small class="lighter">Trail:</small>

                                    <input class="hidden" type="text" name="trail" data-min="10" data-max="100" value="60" />
                                </label>

                                <div class="space-0"></div>

                                <label class="inline">
                                    <small class="lighter">Speed:</small>

                                    <input class="hidden" type="text" name="speed" data-min="0.5" data-max="2.2" data-step="0.1" value="1" />
                                </label>

                                <!-- /section:plugins/jquery.slider -->
                            </form>
                        </div><!-- /.row -->
                    </div><!-- /.row -->
                </div><!-- /.col -->
                <!--弹出层_E-->
                <!--基础框-S-->
                <div class="col-sm-6">
                    <h3 class="header smaller lighter red">Bootstrap Wells</h3>

                    <div class="well">
                        <h4 class="green smaller lighter">Normal Well</h4>
                        Use the well as a simple effect on an element to give it an inset effect.
                    </div>

                    <div class="well well-lg">
                        <h4 class="blue">Large Well</h4>
                        Control padding and rounded corners with two optional modifier classes.
                    </div>
                    <div class="well well-sm"> This is a small well </div>
                </div><!-- /.col -->
                <!--基础框-E-->
            </div>
            <!--弹出层与基础框-E-->
            <!--Dropdowns与Pills-S-->
            <div class="row">
                <!--Dropdowns-S-->
                <div class="col-sm-6">
                    <h3 class="header smaller lighter green">Dropdowns</h3>

                    <!-- #section:elements.dropdown -->
                    <div class="dropdown dropdown-preview">
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#" tabindex="-1">Action</a>
                            </li>

                            <li>
                                <a href="#" tabindex="-1">Another action</a>
                            </li>

                            <li>
                                <a href="#" tabindex="-1">Something else here</a>
                            </li>

                            <li class="divider"></li>

                            <li>
                                <a href="#" tabindex="-1">Separated link</a>
                            </li>
                        </ul>
                    </div>

                    <!-- /section:elements.dropdown -->

                    <!-- #section:elements.dropdown.submenu -->
                    <div class="dropdown dropdown-preview">
                        <ul class="dropdown-menu dropdown-danger">
                            <li>
                                <a href="#" tabindex="-1">Action</a>
                            </li>

                            <li>
                                <a href="#" tabindex="-1">Another action</a>
                            </li>

                            <li>
                                <a href="#" tabindex="-1">Something else here</a>
                            </li>

                            <li class="divider"></li>

                            <li class="dropdown-hover">
                                <a href="#" tabindex="-1" class="clearfix">
                                    <span class="pull-left">More options</span>

                                    <i class="ace-icon fa fa-caret-right pull-right"></i>
                                </a>

                                <ul class="dropdown-menu dropdown-danger">
                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <!-- /section:elements.dropdown.submenu -->
                    <div class="dropup dropdown-preview">
                        <ul class="dropdown-menu dropdown-light">
                            <li>
                                <a href="#" tabindex="-1">Action</a>
                            </li>

                            <li>
                                <a href="#" tabindex="-1">Another action</a>
                            </li>

                            <li>
                                <a href="#" tabindex="-1">Something else here</a>
                            </li>

                            <li class="divider"></li>

                            <li class="dropup dropdown-hover">
                                <a href="#" tabindex="-1" class="clearfix">
                                    <span class="pull-left">More options</span>

                                    <i class="ace-icon fa fa-caret-right pull-right"></i>
                                </a>

                                <ul class="dropdown-menu pull-left">
                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <div class="dropup dropdown-preview">
                        <ul class="dropdown-menu dropdown-purple">
                            <li>
                                <a href="#" tabindex="-1">Action</a>
                            </li>

                            <li>
                                <a href="#" tabindex="-1">Another action</a>
                            </li>

                            <li>
                                <a href="#" tabindex="-1">Something else here</a>
                            </li>

                            <li class="divider"></li>

                            <li class="dropdown-hover dropup">
                                <a href="#" tabindex="-1" class="clearfix">
                                    <span class="pull-left">More options</span>

                                    <i class="ace-icon fa fa-caret-left pull-right"></i>
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>

                                    <li>
                                        <a href="#" tabindex="-1">Second level link</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

            </div>
                <!--Dropdowns-E-->
                <!--Pills-S-->
                <div class="col-sm-6">
                    <h3 class="row header smaller lighter blue">
											<span class="col-sm-7">
												<i class="ace-icon fa fa-th-large"></i>
												Pills
											</span><!-- /.col -->

											<span class="col-sm-5">
												<label class="pull-right inline">
                                                    <small class="muted">Stacked:</small>

                                                    <input id="id-pills-stacked" checked="" type="checkbox" class="ace ace-switch ace-switch-5" />
                                                    <span class="lbl middle"></span>
                                                </label>
											</span><!-- /.col -->
                    </h3>

                    <ul class="nav nav-pills">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>

                        <li class="disabled">
                            <a href="#">Profile</a>
                        </li>

                        <li>
                            <a href="#">Messages</a>
                        </li>
                    </ul>
                </div>
                <!--Pills-E-->
            </div>
            <!--Dropdowns与Pills-E-->
            <!--对话框与数字加减-S-->
            <div class="row">
                <!--对话框-S-->
                <div class="col-sm-6">
                    <h3 class="header blue lighter smaller">
                        <i class="ace-icon fa fa-list-alt smaller-90"></i>
                        Dialogs
                    </h3>
                    <a href="#" id="id-btn-dialog2" class="btn btn-info btn-sm">Confirm Dialog</a>
                    <a href="#" id="id-btn-dialog1" class="btn btn-purple btn-sm">Modal Dialog</a>

                    <div id="dialog-message" class="hide">
                        <p>
                            This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
                        </p>

                        <div class="hr hr-12 hr-double"></div>

                        <p>
                            Currently using
                            <b>36% of your storage space</b>.
                        </p>
                    </div><!-- #dialog-message -->

                    <div id="dialog-confirm" class="hide">
                        <div class="alert alert-info bigger-110">
                            These items will be permanently deleted and cannot be recovered.
                        </div>

                        <div class="space-6"></div>

                        <p class="bigger-110 bolder center grey">
                            <i class="ace-icon fa fa-hand-o-right blue bigger-120"></i>
                            Are you sure?
                        </p>
                    </div><!-- #dialog-confirm -->
                </div><!-- ./span -->
                <!--对话框-E-->
                <!--spinner-S-->
                <div class="col-sm-6">
                    <h3 class="header blue lighter smaller">
                        <i class="ace-icon fa fa-retweet smaller-90"></i>
                        Spinner
                    </h3>

                    <input id="spinner" name="value" type="text" value="3" />
                </div>
                <!--spinner-E-->
            </div>
            <!--对话框与数字加减-E-->
        </div>
    </div>
</body>
</html>